<template>
  <div class="user">
    <div class="reg" v-if="userFlag">
      <van-form>
        <van-field
          v-model="userv"
          name="用户名"
          label="用户名"
          placeholder="用户名"
          :rules="[{ required: true, message: '请填写用户名' }]"
        />
        <van-field
          v-model="pwdv"
          type="password"
          name="密码"
          label="密码"
          placeholder="密码"
          :rules="[{ required: true, message: '请填写密码' }]"
        />
        <van-field
          v-model="pwdagv"
          type="password"
          name="密码"
          label="密码"
          placeholder="密码"
          :rules="[{ required: true, message: '请填写密码' }]"
        />
        <div style="margin: 16px">
          <van-button round block type="info" @click="userRegNow"
            >注册</van-button
          >
        </div>
        <span class="goto" @click="userFlag = false">已有账号,立即登录</span>
      </van-form>
    </div>
    <div class="login" v-else>
      <van-form>
        <van-field
          v-model="loginus"
          name="用户名"
          label="用户名"
          placeholder="请填写用户名"
          :rules="[{ required: true, message: '请填写用户名' }]"
        />
        <van-field
          v-model="loginpw"
          type="password"
          name="密码"
          label="密码"
          placeholder="请输入密码"
          :rules="[{ required: true, message: '请填写密码' }]"
        />
        <div style="margin: 16px">
          <van-button round block type="info" @click="userLoginNow"
            >登录</van-button
          >
          <span class="goto" @click="userFlag = true">还没有账号,现在注册</span>
        </div>
      </van-form>
    </div>
  </div>
</template>
<script>
import { userReg, userLogin } from "./service";
import { Dialog } from "vant";
export default {
  data() {
    return {
      userFlag: true,
      userv: "",
      pwdv: "",
      pwdagv: "",
      loginus: "",
      loginpw: "",
    };
  },
  methods: {
    async userRegNow() {
      if (this.pwdv == this.pwdagv) {
        let obj = { us: this.userv, ps: this.pwdv };
        const { data } = await userReg(obj);
        if (data.code) {
          Dialog({ message: data.msg });
          return false;
        } else {
          Dialog({ message: data.msg });
          this.userFlag = false;
          this.userv = "";
          this.pwdv = "";
          this.pwdagv = "";
        }
      } else {
        Dialog({ message: "两次密码输入不一样" });
      }
    },
    async userLoginNow() {
      let obj = { us: this.loginus, ps: this.loginpw };
      const { data } = await userLogin(obj);
      if (data.code) {
        Dialog({ message: data.msg });
        return false;
      } else {
        Dialog({ message: data.msg });
        const { token, _id } = data.info;
        localStorage.setItem("lgc", JSON.stringify({ token, _id }));
        this.$router.push("/todolist");
      }
    },
  },
  mounted() {},
};
</script>
<style lang="less" scoped>
.user {
  position: relative;
  margin: 20px auto;
  width: 500px;
  height: 220px;
  .reg {
    width: 100%;
    height: 100%;
    .goto {
      color: gray;
      font-size: 12px;
      position: absolute;
    }
  }
  .login {
    width: 100%;
    height: 100%;
    .goto {
      color: gray;
      font-size: 12px;
      position: absolute;
      bottom: 20px;
    }
  }
}
</style>
